<template>
	<div class="team" id="teamwork">
		<div class="teambg">
			<p class="title">合作流程</p>
			<div class="content">
				<div class="contact">
					<img src="../images/qiatan.png">
					<span class="jiantou">>></span>
					<div>1</div>
					<p>双方洽谈</p>
				

				</div>
				<div class="contact">
					<img src="../images/analyze.png">
					<span class="jiantou">>></span>
					<div>2</div>
					<p>分析需求<br>整理方案</p>

				</div>
				<div class="contact">
					<img src="../images/queren.png">
					<span class="jiantou">>></span>
					<div>3</div>
					<p>客户确定</p>

				</div>
				<div class="contact">
					<img src="../images/qianding.png">
					<span class="jiantou">>></span>
					<div>4</div>
					<p>签订合同<br>预交定金</p>

				</div>
				<div class="contact">
					<img src="../images/shebeikaifa.png">
					<span class="jiantou">>></span>
					<div>5</div>
					<p>系统开发<br><span  class="index">测试</span></p>

				</div>
				<div class="contact">
					<img src="../images/shangshi.png">
					<span class="jiantou">>></span>
					<div>6</div>
					<p>系统上市<br>修改细节</p>

				</div>
				<div class="contact">
					<img src="../images/yanshou.png">
					<span class="jiantou">>></span>
					<div>7</div>
					<p>客户验收</p>

				</div>
				<div class="contact">
					<img src="../images/shouhou2.png">
					
					<div>8</div>
					<p><span  class="index1">收尾款</span><br>售后服务</p>

				</div>
			</div>

		</div>

	</div>
</template>

<script>
	
</script>

<style scoped="scoped" lang="less">
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	.teambg {
		width: 100%;
		min-height: 450px;
		background-image: url(../images/team-bg.png);
		background-repeat: no-repeat;
		background-size: auto;
		.title {
			text-align: center;
			line-height: 120px;
			color: #fff;
			font-style: inherit;
			font-size: 24px;
			letter-spacing: 2px;
		}
		.content {
			width: 70%;
			margin-left: 15%;
			height: 240px;
			/*border: 1px solid blue;*/
			display: flex;
			/*justify-content: space-between;
			align-items: center;*/
			.contact {
				/*border:1px  solid  red;*/
				flex: 1;
			position: relative;
				
				
				
				img {
					width: 90px;
					height: 80px;
					margin-left: 25%;
					padding: 0;
					
					
				}
				.jiantou{
					color:#f79f6f;
					font-size: 20px;
					position: absolute;
			       /*margin-left: 50px;*/
			       margin-top: 21%;
			       margin-left:13%;
				}
				div {
					width: 15px;
					height: 15px;
					border-radius: 50%;
					color: #fff;
					text-align: center;
					border: 1px solid #fff;
					margin-left: 49%;
					margin-top: 10%;
					line-height: 15px;
					font-size: 12px;
				}
				p {
					margin-top: 5%;;
					line-height: 25px;
					color: #fff;
					font-style: inherit;
					font-size: 16px;
					letter-spacing: 2px;
					margin-left: 33%;
					
				}
				.index{
					/*text-indent: 2rem;*/
					margin-left: 1rem;
				}
				.index1{
					/*text-indent: 2rem;*/
					margin-left: 0.6rem;
				}
			}
		}
	}
</style>